/**
 * @Author:高志斐
 * @Date:2020/7/15
 * @Description:这是我的收藏页
 */
import React,{Component} from "react";
import {Icon, NavBar, Tabs, WhiteSpace, List, Button, Toast, ListView, ActivityIndicator, Tag} from "antd-mobile";
import {URL} from '../../index'
import axios from "axios";
import {Link} from "react-router-dom";
import {getCookieId} from "../Login/Component_Login/GetCookie";
// 声明全局变量
var data_list=[] //全部的产品数组
var scroll_list=false; //出现menu菜单的时候，产品列表不能进行滚动
const data = [ // 筛选菜单
    {
        value: '1',
        label: '产品类型',
        children: [
            {
                label: '全部',
                value: '1',
                disabled: false,
            },
            {
                label: '基金型',
                value: '2',
            }, {
                label: '股票型',
                value: '3',
            }, {
                label: '混合型',
                value: '4',
            }],
    }, {
        value: '2',
        label: '产品规模',
        children: [
            {
                label: '≤2亿',
                value: '1',
            }, {
                label: '2~10亿',
                value: '2',
            }],
    },

];

// 将获取的数据中属性为数字的转换为文字
function numberName(newList){
    for(let i=0;i<newList.length;i++) {
        //规范组合产品的收益率
        var ratio = newList[i].totalIncomeRadio;
        newList[i].totalIncomeRadio = Number(ratio*100).toFixed(2)+"%";
        //修改组合产品类型
        switch (newList[i].comBaseCate) {
            case 1:
                newList[i].comBaseCate = "股票型";
                break;
            case 2:
                newList[i].comBaseCate = "基金型";
                break;
            case 3:
                newList[i].comBaseCate = "混合型";
                break;
        }
        //修改组合产品风险等级
        switch (newList[i].comBaseRiskLevel) {
            case 1:
                newList[i].comBaseRiskLevel ="谨慎型";
                break;
            case 2:
                newList[i].comBaseRiskLevel ="稳健型";
                break;
            case 3:
                newList[i].comBaseRiskLevel ="平衡型";
                break;
            case 4:
                newList[i].comBaseRiskLevel ="进取型";
                break;
            default:
                newList[i].comBaseRiskLevel ="激进型";
                break;
        }
        //修改组合产品的状态
        switch (newList[i].isUsed) {
            case 0:
                newList[i].isUsed ="已下架";
                break;
            case 1:
                newList[i].isUsed="预售";
                break;
            case 2:
                newList[i].isUsed ="正在运行";
                break;
        }
    }
    return newList;
};

export default class Collect extends Component{
    constructor(...args) {
        super(...args);
        //ListView的dataSource初始化
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });
        this.state = {
            initData: '',
            show: false,
            //listView
            dataSource,
            isLoading: true,
            data_list:[],
            value:"" ,//搜索栏文字
            pageSize:0,
        };
        this.genData.bind(this)
        this.handleLeftClick = this.handleLeftClick.bind(this)
    }

    handleLeftClick(event){
        localStorage.setItem("tabs",2)
        this.props.history.push('/terran/my')
    }
    //初始化产品列表的行列
    genData(pIndex = 0) {
        var NUM_ROWS = this.state.pageSize;
        const dataBlob = {};
        for (let i = 0; i < NUM_ROWS; i++) {
            const ii = (pIndex * NUM_ROWS) + i;
            dataBlob[`${ii}`] = `row - ${ii}`;
        }
        return dataBlob;
    }
    //获取页面数据
    componentWillMount() {
        axios({
            method:"GET",
            url:URL+"/userCollect/UserCollectComList",
            params:{userId:getCookieId()}
        }).then(res=>{
            if(res.data.code == 200){
                data_list=numberName(res.data.userCollectList) //将对象内的数字属性转化为文字
                this.setState({
                    data_list:data_list,
                    pageSize:data_list.length,
                })
            }
        }).catch(error=>{
            console.log(error);
        });
    }
    //请求初始化数据
    componentDidMount() {
        setTimeout(() => {
            this.rData = this.genData();
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                isLoading: false,
            });
        }, 600);
    }
    // 分页请求
    onEndReached = (event) => {
        if (this.state.isLoading) {
            return;
        }
    }

    render() {
        const loadingEl = ( //面板
            <div style={{ width: '100%', height: document.documentElement.clientHeight * 0.6, display: 'flex', justifyContent: 'center' }}>
                <ActivityIndicator size="large" />
            </div>
        );

        //ListView间隔
        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    backgroundColor: '#F5F5F9',
                    height: 8,
                    borderTop: '1px solid #ECECED',
                    borderBottom: '1px solid #ECECED',
                }}
            />
        );
        let index = this.state.data_list.length - 1;
        //列表的item
        const row = (rowData, sectionID, rowID) => {
            if (index < 0) {
                index = this.state.data_list.length - 1;
            }
            const obj = this.state.data_list[index--];
            return (
                <Link to={{pathname:"/collectDetail",state:{comBaseId:obj.comBaseId,comBaseName: obj.comBaseName,
                        conBaseStartMoney: obj.conBaseStartMoney,comBaseCate: obj.comBaseCate,
                        comBaseRiskLevel:obj.comBaseRiskLevel}}}>{/*onClick={()=>{this.props.func(this.props.comBaseId)}}*/}
                    <div key={rowID} style={{ padding: '0 15px' }}  >
                        <div
                            style={{
                                lineHeight: '50px',
                                color: '#888',
                                fontSize: 18,
                                borderBottom: '1px solid #F6F6F6',
                            }}
                        >
                            {obj.comBaseName}
                            <Tag style={{color:"#f8a83f",float:"right",marginTop:13}}>{obj.comBaseCate}</Tag>
                        </div>
                        <div style={{ display: '-webkit-box,flex', padding: '10px 0' }}>
                            {/* <img style={{ height: '64px', marginRight: '15px' }} src={obj.img} alt="" />*/}
                            <div style={{ lineHeight: 1 }}>
                                <div className="productList" >
                                    <ul className="productList-ul" >
                                        <li className="font3">
                                            {obj.comBaseRiskLevel}
                                            <p className="gray-text">风险等级</p>
                                        </li>
                                        <li className="font1">
                                            {obj.totalIncomeRadio}
                                            <p className="gray-text">成立以来收益率</p>
                                        </li>
                                        <li className="font2">
                                            {obj.isUsed}
                                            <p className="gray-text">组合状态</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </Link>
            );
        };
        return (
            <div>
                {/*页面顶部*/}
                <div style={{position:"fixed",width:"100%",zIndex:999}}>
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" style={{color:" #f8a83f"}} />}
                        onLeftClick={this.handleLeftClick}
                    >我的收藏</NavBar>
                </div>
                <WhiteSpace size="lg"/>
                <WhiteSpace size="lg"/>
                <div style={{height:25}}></div>
                <div className={scroll_list ? 'list-scroll' : ''} >
                    <ListView
                        ref={el => this.lv = el}
                        dataSource={this.state.dataSource}
                        renderFooter={() => (<div style={{ padding: 0, textAlign: 'center' }}>
                            {this.state.isLoading ? '加载中' : '已全部加载'}
                        </div>)}
                        renderRow={row}
                        renderSeparator={separator}
                        className="am-list"
                        pageSize={this.state.pageSize}
                        scrollEventThrottle={5}
                        useBodyScroll
                        onScroll={() => { console.log('scroll'); }}
                        scrollRenderAheadDistance={500}
                        onEndReached={this.onEndReached}
                        onEndReachedThreshold={10}
                    />
                </div>
            </div>
        );
    }
}
